<template>
  <view class="handle">
    <view class="handle-title">投诉意见</view>
    <view class="location">
      <view class="location-item" @tap="getLocation">
        <view class="location-title">地址:</view>
        <view class="location-content">{{advise.location}}</view>
      </view>
      <view class="location-item" v-if="advise.stateCode==1">
        <view class="location-title">负责辖区:</view>
        <view class="location-content">{{advise.firstAddress+"/"+advise.secondAddress}}</view>
      </view>
      <view class="location-item">
        <view class="location-title">详细位置:</view>
        <view class="location-content">{{advise.fullAddress}}</view>
      </view>
      <view class="location-item">
        <view class="location-title">发表时间:</view>
        <view class="location-content">{{advise.createTime}}</view>
      </view>
      <view class="location-item">
        <view class="location-title">意见内容:</view>
        <scroll-view class="location-content" scroll-y="true" style="height: 400rpx;width: 90%;" @longtap="copyText">
          <view>{{advise.content}}</view>
        </scroll-view>
      </view>
      <view class="location-item" v-if="advise.stateCode==2 && results.reason">
        <view class="location-title">驳回理由:</view>
        <view class="location-content">{{results.reason}}</view>
      </view>
      <view class="image-item">
        <view class="location-title">图片描述:</view>
        <view class="location-image">
          <image mode="aspectFill" :data-imageList="advise.imageList" v-for="(item, index) in advise.imageList" :src="item.url" class="image" @tap="showImage" :data-index="index" :key="index"></image>
        </view>
      </view>
    </view>

    <!-- 辖区分配 -->
    <view class="handle" v-if="code==firstCode">
      <view class="handle-title">辖区分配</view>
      <view class="opinion">
        <view class="location-item">
          <picker mode="multiSelector" :range="locationList" @columnchange="updateSecondAddress" @change="getAddress" range-key="address">
            <view class="address-picker">
              <view class="address-title">辖区选择</view>
              <view class="address-content" v-if="firstAddress!='' && secondAddress!=''">{{ firstAddress +"/"+secondAddress}}</view>
            </view>
          </picker>
        </view>
      </view>
      <view class="btn" v-if="advise.stateCode==0">
        <button class="distort" @tap="rejected">误报驳回</button>
        <button class="upload" @tap="sentAddress">上传分配</button>
      </view>
    </view>

    <!-- 处理结果 -->
    <view class="handle" v-if="advise.stateCode!=0 && code!=0">
      <view class="handle-title">处理结果</view>
      <view class="opinion">
        <textarea class="opinion-content" maxlength="-1" placeholder="结果描述..." v-model="content" @input="onInput"></textarea>
        <view class="opinion-image">
          <!-- 显示选择图片 -->
          <view v-for="(item, index) in imageList" :key="index" class="image">
            <image class="image-content" :src="item" mode="aspectFill" @tap="showImage" :data-imageList="imageList" :data-index="index" />
            <i class="image-del" @tap="onDelImage" :data-index="index">×</i>
          </view>
          <!-- 上传图片按钮 -->
          <view class="image image-select" @tap="uploadImage" v-if="isSelectPhoto">
            <i>+</i>
          </view>
        </view>
      </view>
      <view class="btn">
        <button class="again-upload" @tap="sentAddress" v-if="code==firstCode">重新分配</button>
        <button class="send-btn" @tap="sendResults">上传结果</button>
      </view>
      <view class="urge" @tap="urgeAdvise" v-if="isAdmin">
        一键催办
      </view>
    </view>
  </view>
</template>

<script>
// import { rejectedAdvise, sentAddress } from "../../apis/release_api"
// import { getFirstAddress, getSecondAddress } from "../../apis/address_api"
// import { uploadResults, getResultsByAdviseId } from "../../apis/results_api"

export default {
  data() {
    return {
      code: '',
      firstCode: getApp().globalData.firstCode,
      advise: {},
      firstAddress: "",
      secondAddress: "",
      locationList: [[], []],
      results: {},
      content: '',
      imageList: [],
      isSelectPhoto: true,
      isAdmin: false
    }
  },
  methods: {
    // Methods go here
  },
  onShow() {
    // Your code here
  },
  onLoad(options) {
    // Your code here
  },
}
</script>

<style scoped>

.handle {
    width: 94vw;
    padding: 3vw;
}

.handle-title {
    width: 20vw;
    text-align: center;
    border-radius: 15rpx 0 0 0;
    padding: 0 3vw;
    font-size: 35rpx;
    font-weight: 400;
    height: 60rpx;
    line-height: 60rpx;
    background-color: #409eff;
    color: #fff;
}


.location,
.opinion {
    width: 100%;
    background-color: #fff;
    border-radius: 0 15rpx 15rpx 15rpx;
}

.location-item {
    width: 88vw;
    padding: 0 3vw;
    display: flex;
}

.image-item {
    width: 88vw;
    padding: 0 3vw;
}

.address-picker {
    width: 88vw;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
}

.address-title {
    flex: 1;
}

.address-content {
    flex: 3;
    padding: 0 3vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.location-title {
    flex: 1;
    line-height: 70rpx;
}

.location-content {
    flex: 3;
    padding: 0 3vw;
    overflow: hidden;
    display: flex;
    line-height: 70rpx;
    align-items: center;
}

.location-image {
    display: flex;
    flex-wrap: wrap;
    width: 88vw;
    padding: 3vw 0;
}

.location-input {
    width: 100%;
}

.jurisdiction-picker {
    width: 88vw;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
}

.jurisdiction-title {
    flex: 1;
    line-height: 90rpx;
}

handle-title .jurisdiction-content {
    flex: 3;
    line-height: 90rpx;
    font-size: 25rpx;
    overflow: hidden;
}

.opinion-content {
    font-size: 30rpx;
    width: 88vw;
    font-weight: 300;
    height: 200rpx;
    padding: 3vw;
}

.opinion-image {
    display: flex;
    flex-wrap: wrap;
    width: 88vw;
    padding: 3vw;
}

.image {
    width: 28vw;
    height: 28vw;
    border-radius: 5rpx;
    overflow: hidden;
    position: relative;
}

.image:not(:nth-child(1)) {
    margin-left: 1.5vw;
}

.image-content {
    width: 28vw;
    height: 28vw;
}

.image-del {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-align: center;
    line-height: 40rpx;
    font-size: 30rpx;
    font-weight: bolder;
    border-radius: 20rpx
}

.image-select {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rpx dashed #888;
    border-radius: 5rpx;
}

.image-select i {
    width: 4vw;
    height: 4vw;
    line-height: 4vw;
    text-align: center;
    font-size: 35rpx;
    font-weight: 300;
}

.send-btn {
    margin: 80rpx 0;
    color: #fff;
    width: 255rpx !important;
    background-color: #409eff;
}

.btn {
    display: flex;
}

.distort,
.again-upload {
    margin: 80rpx 0;
    width: 255rpx !important;
}

.upload {
    width: 255rpx !important;
    margin: 80rpx 0;
    color: #fff;
    background-color: #409eff;
}

.urge{
    height: 80rpx;
    width: 93vw;
    line-height: 80rpx;
    text-align: center;
    background-color: #F56C6C;
    color: #fff;
    font-size: 35rpx;
    font-weight: bold;
    border-radius: 10rpx;
  }
  </style>